<template>
  <view class="wrong-page">
    <!-- 顶部栏 -->
    <view class="wrong-header-bar">
      <uv-icon name="arrow-left" size="28" color="#fff" class="wrong-back" @click="goBack" />
      <text class="wrong-title">我的错题集</text>
     
    </view>
    <!-- 统计卡片 -->
    <view class="wrong-stat-card">
     <uv-input placeholder="请输入关键字搜索" border="surround" v-model="value" @change="change"></uv-input>
  <uv-button text="搜索" type="primary" @click="search"></uv-button>
    </view>
    <!-- 题型Tab -->
 
    <!-- 错题列表 -->
    <view class="wrong-list">
      <view class="wrong-card" v-for="item in filteredList" :key="item.id">
        <view class="wrong-card-row1">
          <uv-icon :name="item.typeIcon" size="22" color="#3ad6b6" style="margin-right: 8rpx;" />
          <text class="wrong-card-title">{{ item.title }}</text>
        </view>
        <view class="wrong-card-date">{{ item.date }}</view>
        <view class="wrong-card-type">{{ item.typeLabel }}</view>
        <view class="wrong-answer-block">
          <view class="wrong-answer-row">
            <text class="wrong-answer-label">你的答案</text>
            <text :class="['wrong-answer-value', item.isCorrect ? 'right' : 'wrong']">{{ item.userAnswer }}</text>
          </view>
          <view class="wrong-answer-row">
            <text class="wrong-answer-label">正确答案</text>
            <text class="wrong-answer-value right">{{ item.correctAnswer }}</text>
          </view>
        </view>
        <view class="wrong-card-actions">
          <uv-button type="primary" size="small" plain class="wrong-btn" style="margin-right: 16rpx;">查看解析</uv-button>
          <uv-button type="primary" size="small" class="wrong-btn">重新练习</uv-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uvInput from '../uni_modules/uv-input/components/uv-input/uv-input.vue'
export default {
components: { uvInput },
  data() {
    return {
      tabIndex: 0,
      wrongList: [
        {
          id: 1,
          type: 'choice',
          typeLabel: '选择题',
          typeIcon: 'question-circle',
          title: '在React中，哪个生命周期方法会在组件挂载后立即调用？',
          date: '2025-07-23',
          userAnswer: 'undefined',
          correctAnswer: 'componentDidMount',
          isCorrect: false
        },
        {
          id: 2,
          type: 'judge',
          typeLabel: '判断题',
          typeIcon: 'question-circle',
          title: '在JavaScript中，null 和 undefined 是严格相等的（使用 === 比较）。',
          date: '2025-07-23',
          userAnswer: '错误',
          correctAnswer: '错误',
          isCorrect: true
        },
        {
          id: 3,
          type: 'qa',
          typeLabel: '问答题',
          typeIcon: 'question-circle',
          title: '在SQL中，哪种连接类型会返回两个表中所有的记录？',
          date: '2025-07-23',
          userAnswer: '',
          correctAnswer: 'FULL JOIN',
          isCorrect: false
        }
      ]
    }
  },
  computed: {
    filteredList() {
      if (this.tabIndex === 0) return this.wrongList
      const typeMap = ['choice', 'judge', 'qa']
      return this.wrongList.filter(item => item.type === typeMap[this.tabIndex - 1])
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/uni.scss";
.wrong-page {
  min-height: 100vh;
  background: #f8f8f8;
  box-sizing: border-box;
  padding-bottom: 32rpx;
}
.wrong-header-bar {
  background: $uni-default-color;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24rpx;
  height: 90rpx;
  position: sticky;
  top: 0;
  z-index: 10;
  .wrong-back {
    position: absolute;
    left: 24rpx;
  }
}
.wrong-title {
  font-size: 32rpx;
  font-weight: bold;
}
.wrong-stat-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  padding: 24rpx ;
  margin: 24rpx auto 18rpx auto;
  width: 92%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  gap: 22rpx;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-num {
  color: #4ecdc4;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 6rpx;
}
.stat-label {
  color: #888;
  font-size: 22rpx;
}
.custom-tabs {
  display: flex;
  background: #fff;
  border-radius: 18rpx;
  margin: 0 auto 18rpx auto;
  width: 92%;
  padding: 8rpx 0;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.custom-tab {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 18rpx 0 18rpx 0;
  position: relative;
  cursor: pointer;
  transition: color 0.2s;
  font-weight: 500;
}
.custom-tab.active {
  color: #4ecdc4;
  font-weight: bold;
}
.custom-tab-underline {
  position: absolute;
  left: 50%;
  bottom: 4rpx;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background: #4ecdc4;
  border-radius: 3rpx;
}
.wrong-list {
  width: 92%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}
.wrong-card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  padding: 24rpx 18rpx 18rpx 18rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  border-left: 8rpx solid #4ecdc4;
}
.wrong-card-row1 {
  display: flex;
  align-items: center;
  margin-bottom: 6rpx;
}
.wrong-card-title {
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
}
.wrong-card-date {
  font-size: 20rpx;
  color: #aaa;
  margin-bottom: 4rpx;
}
.wrong-card-type {
  font-size: 20rpx;
  color: #4ecdc4;
  margin-bottom: 8rpx;
}
.wrong-answer-block {
  background: #f8f8f8;
  border-radius: 10rpx;
  padding: 12rpx 10rpx;
  margin-bottom: 8rpx;
}
.wrong-answer-row {
  display: flex;
  align-items: center;
  margin-bottom: 6rpx;
}
.wrong-answer-label {
  color: #888;
  font-size: 22rpx;
  margin-right: 12rpx;
}
.wrong-answer-value {
  font-size: 22rpx;
  padding: 0 8rpx;
  border-radius: 6rpx;
}
.wrong-answer-value.right {
  color: #4ecdc4;
  background: #e6f7f6;
}
.wrong-answer-value.wrong {
  color: #ff4d4f;
  background: #ffeaea;
}
.wrong-card-actions {
  display: flex;
  align-items: center;
  margin-top: 8rpx;
}
.wrong-btn {
  min-width: 160rpx;
  font-size: 24rpx;
}
</style>
